<template>
  <div class="user-waiting">
    <h1>前方还有: {{ appointment.peopleAhead }}人</h1>
    <div class="user-waiting-detail">
      <div class="user-waiting-items recure-time">
        就诊时间:
        <span>{{ appointment.date }} {{ appointment.time }}</span>
      </div>
      <div class="user-waiting-items">
        医院名称:
        <span>重庆大学附属医院</span>
      </div>
      <div class="user-waiting-items">
        就诊科室:
        <span> {{ appointment.department }}</span>
      </div>
      <div class="user-waiting-items">
        医生姓名:
        <span> {{ appointment.doctorName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserWaiting",
  props: ["id"],
  appointment: {},
  data() {
    return {
      appointment: {
        id: "1",
        doctorName: "张医生",
        date: "2021-09-01",
        time: "09:00-10:00",
        department: "内科",
        statue: "0",
        operation: "0",
      },
      user: {
        id: "1",
        name: "张三",
        age: "20",
        department: "内科",
      },
    };
  },
  mounted() {
    this.appointment = JSON.parse(localStorage.getItem("appointment"));
  },
};
</script>

<style scoped>
.user-waiting {
  padding: 20px;
  font-size: 16px;
  margin-top: 10vh;
}
.user-waiting-detail {
  margin-top: 20px;
}
.user-waiting-items {
  width: 80vw; /* 设置宽度 */
  height: 20px;
  margin-top: 10px;
  padding: 15px; /* 内边距 */
  background-color: #f9f9f9; /* 背景颜色 */
  border-radius: 10px; /* 圆角 */
  border: 1px solid #ddd; /* 边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}
</style>
